<template>
    <el-container class="org">
        <el-card class="ep-card" style="width: 300px;">
            <el-scrollbar style="height: 430px;width: 194px">
                <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-scrollbar>
        </el-card>
        <el-card class="ep-card" style="margin-left: 10px;width: 100%;">
            <div slot="header" class="clearfix">
                <el-button type="primary"  @click="addMenuTop" size="small">新建根节点</el-button>
                <el-button type="primary"  @click="addMenu" size="small">新建</el-button>
                <el-button type="primary"  @click="saveMenu" size="small" :disabled="disabled2">保存</el-button>
                <el-button type="primary" @click="deleteMenu" size="small" :disabled="disabled2">删除</el-button>
            </div>
            <el-form :model="menuForm" name="menuForm" ref="menuForm"  :rules="rules" class="formclass">
                <el-row class="elrow1">
                    <el-col :span="8">
                        <el-form-item label="菜单名称" label-width="100px" prop="title">
                            <el-input v-model="menuForm.title" type="text" name="title" placeholder="请输入名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="功能编号" label-width="100px" prop="funcode">
                            <el-input v-model="menuForm.funcode" type="number" min="0" name="funcode" placeholder="请输入功能编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="节点类型" label-width="100px" prop="nodetype" >
                            <el-select v-model="menuForm.nodetype" style="width: 100%" @change="selectTrigger(menuForm.nodetype)" :disabled="disabled">
                                <el-option v-for="item in codeTypes.NODETYPE" :key="item.key" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="24">
                        <el-form-item label="节点链接" label-width="100px" prop="location">
                            <el-input v-model="menuForm.location" type="text" name="location" placeholder="请输入节点链接" :disabled="disabled1"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="菜单类型" label-width="100px" prop="funtype">
                            <el-select v-model="menuForm.funtype" style="width: 100%" :disabled="this.disabled">
                                <el-option v-for="item in codeTypes.FUNTYPE" :key="item.key" :label="item.value" :value="item.key" >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="菜单图标" label-width="100px">
                            <el-input v-model="menuForm.icon" type="text" name="icon" placeholder="请输入图标" >
                                <i
                                    class="el-icon-search el-input__icon"
                                    slot="suffix"
                                    @click="handleIconClick">
                                </i>
                            </el-input>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序编号" label-width="100px" prop="funorder">
                            <el-input v-model="menuForm.funorder" type="number" name="funorder" min="0" placeholder="请输入排序号" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="开发人员" label-width="100px">
                            <el-input v-model="menuForm.developer" type="text" name="developer" placeholder="请输入开发人员" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="有效标志" label-width="100px">
                            <el-select v-model="menuForm.active" style="width: 100%">
                                <el-option v-for="item in codeTypes.AAE100" :key="item.key" :label="item.value" :value="item.key"  >
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="记录日志标志" label-width="100px">
                            <el-select v-model="menuForm.islog" style="width: 100%">
                                <el-option v-for="item in codeTypes.ISLOG" :key="item.key" :label="item.value" :value="item.key"  >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="自动审核标志" label-width="100px">
                            <el-select v-model="menuForm.auflag" style="width: 100%">
                                <el-option v-for="item in codeTypes.AUFLAG" :key="item.key" :label="item.value" :value="item.key"  >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="日志回退标志" label-width="100px">
                            <el-select v-model="menuForm.rbflag" style="width: 100%">
                                <el-option v-for="item in codeTypes.RBFLAG" :key="item.key" :label="item.value" :value="item.key"  >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" label-width="100px">
                            <el-input v-model="menuForm.funcode" type="hidden" name="functionid" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="中文描述" label-width="100px">
                            <el-input v-model="menuForm.description" type="textarea" name="description" placeholder="请输入中文描述" rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                    <el-form-item label="" label-width="100px">
                        <el-input v-model="menuForm.parentid" type="hidden" name="parentid" placeholder="" :disabled="true"></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-dialog title="请选择菜单图标" :visible.sync="dialogFormVisible" width="750px" top="5vh" close-on-press-escape>
            <el-scrollbar style="height: calc(100vh - 200px);width: 730px">
                <ep-icon v-on:listenToChildEvent="setIcon"></ep-icon>
            </el-scrollbar>
        </el-dialog>
    </el-container>
</template>





<script type="es6">
    import Vue from 'vue';
    export default {
        data() {
            return {
                treedata:[],
                fob:"",//放路径
                fob1:"",//放节点类型
                fob2:"",//放菜单类型
                disabled:false,//节点和菜单
                disabled1:false,
                disabled2:false,//保存和删除按钮
                menuForm:{
                    title:"",
                    nodetype:"",
                    location:"",
                    funtype:"",
                    parentid:"",
                    functionid:"",
                    islog:"",
                    funcode:"",
                    funorder:"",
                    description:"",
                    developer:"",
                    icon:"",
                    active:"",
                    auflag:"",
                    rbflag:""
                },
                a:"",
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                rules: {
                    title: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    nodetype: [
                        {required: true, message: '请输入类型', trigger: 'blur'}
                    ],
                    funtype: [
                        {required: true, message: '请输入类型', trigger: 'blur'}
                    ],
                    location: [
                        {required: true, message: '请输入路径', trigger: 'blur'}
                    ],
                    functionid: [
                        {required: true, message: '请输入编号', trigger: 'blur'}
                    ],
                    funorder: [
                        {required: true, message: '请输入排序号', trigger: 'blur'}
                    ],
                    funcode: [
                        {required: true, message: '请输入排序号', trigger: 'blur'}
                    ]


                },
                codeTypes: {
                    FUNTYPE: [],
                    NODETYPE: [],
                    ISLOG:[],
                    AAE100:[],
                    AUFLAG:[],
                    RBFLAG:[]
                },
                dialogFormVisible: false
            }},

        created:function(){
            this.changeDate();
        },
        mounted() {
            this.initCodeTypes();
        },

        /**
         * 里面的方法只有被调用才会执行
         */
        methods: {

            selectTrigger(val){
                /**
                 当为节点的时候
                 */
                if (val==1){
                    let _this=this;
                    this.menuForm.funtype="0";
                    this.disabled=false;
                    this.menuForm.location="/";
                    _this.disabled1=true;
                }
                /**
                 当为叶子的时候
                 */
                if (val==2){
                    let _this=this;
                    console.info("hahhahah")
                    this.menuForm.funtype=this.fob2;
                    this.menuForm.location=this.fob;
                    _this.disabled1=false;
                }
                /**
                 当为按钮的时候
                 */
                if (val==3){
                    let _this=this;
                    console.info("hahhahah")
                    this.menuForm.funtype=this.fob2;
                    this.menuForm.location=this.fob;
                    _this.disabled1=false;
                }
            },
            initCodeTypes() {
                let _this=this;
                let params = _this.codeTypes;
                _this.$api.commonPost(this.$store.getters.path + "/initCodeTypes", params).then(res => {
                    if(res.status === "0") {
                        console.info("codeType初始化");
                        console.info(res);
                        _this.codeTypes = res.data;
                        console.info(_this.codeTypes);
                    }
                });
            },
            saveMenu(){
                let _this=this;
                console.log("保存保存")
                console.log(_this.menuForm.funorder)

                let param = {
                    form:_this.menuForm
                }
                if (_this.menuForm.parentid==null){
                    Vue.prototype.$message.error("请选择父级菜单");
                }else if (_this.menuForm.location=="/"&&_this.menuForm.nodetype!="1"){
                    Vue.prototype.$message.error("请输入路径");
                }else if (_this.a==_this.menuForm.location){
                    Vue.prototype.$message.error("请输入路径");
                }
                else if (_this.menuForm.title==""||_this.menuForm.title==null){
                    Vue.prototype.$message.error("请点击左侧操作");
                }else if (_this.menuForm.title==""||_this.menuForm.funcode==""||_this.menuForm.nodetype==""||_this.menuForm.location==""||_this.menuForm.funtype==""
                ){
                    Vue.prototype.$message.error("请完善表单");
                }
                else if (_this.menuForm.functionid!=null){
                    _this.$api.commonPost(this.$store.getters.path+"/saveMenu",param).then(function (res) {
                        console.log("保存");
                        if (res.status==="0"){
                            Vue.prototype.$message.success("保存成功");
                            _this.changeDate();
                            _this.initForm();
                        }
                        else if (res.status==="1"){
                            Vue.prototype.$message.warning("路径重复");
                        }else {
                            Vue.prototype.$message.error("保存失败");
                        }
                        console.log(res);
                    })
                }
                else {
                    _this.$confirm('是否保存该代码?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.$api.commonPost(this.$store.getters.path+"/saveMenu",param).then(function (res) {
                            console.log("保存");
                            if (res.status==="0"){
                                Vue.prototype.$message.success("保存成功");
                                _this.changeDate();
                                _this.initForm();
                            }
                            else if (res.status==="1"){
                                Vue.prototype.$message.warning("路径重复");
                            }else {
                                Vue.prototype.$message.error("保存失败");
                            }
                            console.log(res);
                        })
                    }).catch(() => {
                        Vue.prototype.$message.success("已取消保存");
                    });
                }


            },
            initForm(){
                let _this=this;
                _this.menuForm.nodetype="";
                _this.menuForm.funtype="";
                _this.menuForm.title="";
                _this.menuForm.location="";
                _this.menuForm.functionid="";
                _this.menuForm.parentid="";
                _this.menuForm.active="";
                _this.menuForm.funcode="";
                _this.menuForm.islog="";
                _this.menuForm.funorder="";
                _this.menuForm.description="";
                _this.menuForm.developer="";
                _this.menuForm.icon="";
                _this.menuForm.auflag="";
                _this.menuForm.rbflag="";
            },
            addMenuTop(){
                Vue.prototype.$message.success("请填写需根节点内容");
                let _this=this;
                _this.menuForm.nodetype="1";
                _this.menuForm.funtype="0";
                _this.menuForm.title="";
                _this.menuForm.location="/";
                _this.menuForm.functionid="";
                _this.menuForm.parentid="0";
                _this.menuForm.active="";
                _this.menuForm.funcode="";
                _this.menuForm.islog="";
                _this.menuForm.funorder="";
                _this.menuForm.description="";
                _this.menuForm.developer="";
                _this.menuForm.icon="";
                _this.menuForm.auflag="";
                _this.menuForm.rbflag="";
                _this.disabled=false;
                _this.disabled1=true;
            },
            addMenu(){
                let _this=this;
                console.info("菜单的父级");
                console.info(_this.menuForm.parentid);

                let param={
                    parentid:_this.menuForm.parentid
                }
                if (_this.menuForm.parentid==null||_this.menuForm.nodetype==""||_this.menuForm.funtype==""
                    ||_this.menuForm.location==""||_this.menuForm.title==""||_this.menuForm.functionid==""){
                    Vue.prototype.$message.error("请选择点击左侧菜单");
                }else {
                    _this.menuForm.parentid=_this.menuForm.functionid;
                    _this.menuForm.title="";
                    _this.menuForm.functionid="";
                    _this.menuForm.active="";
                    _this.menuForm.funcode="";
                    _this.menuForm.islog="";
                    _this.menuForm.funorder="";
                    _this.menuForm.description="";
                    _this.menuForm.developer="";
                    _this.menuForm.icon="";
                    _this.menuForm.auflag="";
                    _this.menuForm.rbflag="";
                    Vue.prototype.$message.success("请填写内容");
                    if (_this.fob1==3){
                        Vue.prototype.$message.error("不可在按钮下新增！！");
                        _this.disabled2=true;
                    }
                    if (_this.fob1==2){
                        _this.disabled=true;
                        _this.menuForm.nodetype="3";
                        _this.menuForm.funtype=_this.fob2;
                        _this.menuForm.location=_this.menuForm.location+"/";
                        _this.a=_this.menuForm.location;
                    }
                    if (_this.fob1==1){
                        _this.$api.commonPost(this.$store.getters.path+"/queryMenuByPid",param).then(function (res) {
                            console.log("hhh");
                            console.log(res)
                            if (res.status!="9") {
                                _this.disabled = false;
                                _this.menuForm.nodetype = _this.fob1;
                                _this.menuForm.funtype = _this.fob2;
                                _this.menuForm.location = "/";
                            }else{
                                Vue.prototype.$message.error("最多建三层！！！");
                            }
                        })

                    }
                }



            },
            deleteMenu(){
                let _this=this;
                let param = {
                    form:_this.menuForm,
                    treedata:_this.treedata
                }
                if (_this.menuForm.parentid==null||_this.menuForm.nodetype==""||_this.menuForm.funtype==""
                    ||_this.menuForm.location==""||_this.menuForm.title==""||_this.menuForm.functionid==""){
                    Vue.prototype.$message.error("请选择点击左侧菜单选择删除的页面");
                }else{
                    _this.$confirm('您确定要删除该菜单吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.$api.commonPost(this.$store.getters.path+"/queryRoleBy",param).then(function (res) {
                            console.info("yiyiyi:"+res.status)
                            if (res.status==="0"){
                                _this.delete2();
                                _this.changeDate();
                            }
                            if (res.status==="1"){
                                _this.$confirm('该级或下级含有角色权限是否删除?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    _this.delete1();
                                    _this.changeDate();
                                }).catch(() => {
                                    Vue.prototype.$message.success("已取消删除");
                                });
                            }
                        })
                    }).catch(() => {
                        Vue.prototype.$message.success("已取消删除");
                    });
                }
            },
            delete1:function(){
                //和角色有关系
                let _this=this;
                let param = {
                    form:_this.menuForm,
                    withRole:true,
                    treedata:_this.treedata,
                    node:_this.menuForm.functionid
                }
                _this.$api.commonPost(this.$store.getters.path+"/deleteMenu",param).then(function (res) {
                    if (res.status==="0"){
                        Vue.prototype.$message.success("删除成功");
                        _this.changeDate();
                        _this.initForm();
                    }else {
                        Vue.prototype.$message.error("删除失败");
                    }
                })
            },
            delete2:function(){
                //没有和角色有关系
                let _this=this;
                let param = {
                    form:_this.menuForm,
                    withRole:false,
                    treedata:_this.treedata,
                    node:_this.menuForm.functionid
                }
                _this.$api.commonPost(this.$store.getters.path+"/deleteMenu",param).then(function (res) {
                    if (res.status==="0"){
                        Vue.prototype.$message.success("删除成功");
                        _this.changeDate();
                        _this.initForm();
                    }else {
                        Vue.prototype.$message.error("删除失败");
                    }
                })
            },
            changeDate:function () {
                let _this=this;
                _this.$api.commonGet(this.$store.getters.path+"/queryTree").then(function (res) {
                    if (res.status==="0"){
                        console.log("这是拿到数据的地方");
                        console.log(res.data);
                        let newData=res.data;
                        _this.treedata=newData;
                        console.log('lxf',_this.treedata);
                    }
                })

            },
            handleNodeClick(data) {
                let _this=this;
                _this.disabled2=false;
                let param={
                    functionid:data.functionid
                }
                _this.$api.commonPost(this.$store.getters.path+"/nodeClick",param).then(function (res) {
                    console.log("测试返回数据")
                    console.info(res)
                    _this.menuForm.parentid=res.data.parentid;
                    _this.menuForm.nodetype=res.data.nodetype;
                    _this.menuForm.funtype=res.data.funtype;
                    _this.menuForm.title=res.data.title;
                    _this.menuForm.location=res.data.location;
                    _this.menuForm.functionid=res.data.functionid;
                    _this.menuForm.funcode=res.data.funcode;
                    _this.fob2=_this.menuForm.funtype,
                        _this.fob1=_this.menuForm.nodetype,
                        _this.fob=_this.menuForm.location
                    _this.disabled1=false;
                    if (_this.menuForm.nodetype=="1"){
                        _this.disabled1=true;
                    }

                    if (res.status==="0"){
                        _this.disabled=true;
                    }
                    if (res.status==="1"){
                        _this.disabled=false;
                        if (_this.menuForm.nodetype=="3"){
                            _this.disabled=true;
                            console.log("菜单为3");
                            console.log( _this.disabled);
                        }
                    }
                    if (res.data.active!=null){
                        _this.menuForm.active=res.data.active;
                    }else {
                        _this.menuForm.active=""
                    }
                    if (res.data.islog!=null){
                        _this.menuForm.islog=res.data.islog;
                    }else {
                        _this.menuForm.islog=""
                    }
                    if (res.data.funorder!=null){
                        _this.menuForm.funorder=res.data.funorder;
                    }else {
                        _this.menuForm.funorder=""
                    }
                    if (res.data.description!=null){
                        _this.menuForm.description=res.data.description;
                    }else {
                        _this.menuForm.description=""
                    }
                    if (res.data.developer!=null){
                        _this.menuForm.developer=res.data.developer;
                    }else {
                        _this.menuForm.developer=""
                    }
                    if (res.data.icon!=null){
                        _this.menuForm.icon=res.data.icon;
                    }else {
                        _this.menuForm.icon=""
                    }
                    if (res.data.auflag!=null){
                        _this.menuForm.auflag=res.data.auflag;
                    }else {
                        _this.menuForm.auflag=""
                    }
                    if (res.data.rbflag!=null){
                        _this.menuForm.rbflag=res.data.rbflag;
                    }else {
                        _this.menuForm.rbflag=""
                    }
                })
            },
            setIcon(data) {
                console.info(data);
                this.menuForm.icon = data;
                this.dialogFormVisible = false;
            },
            handleIconClick() {
                this.dialogFormVisible = true;
            }
        }
    }

</script>

<style lang="less" scoped>
    .org {

        /deep/ .el-main {
            padding: 0 10px;
        }

        /deep/ .el-card__header {
            padding: 5px 20px 15px;
        }

        /deep/ .el-checkbox + .el-checkbox {
            margin-left: 0px;
        }

        /deep/ .el-checkbox {
            margin-right: 30px;
        }

        /deep/ .el-scrollbar .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        /deep/ .el-tree > .el-tree-node {
            display: inline-block;
            min-width: 194px;
        }

        /deep/ .el-icon-search {
            /*color: #000;*/
            cursor: pointer;
        }

    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix{
        margin-left: 60%;
    }
    .clearfix:after {
        clear: both
    }
    .myheader {
        background-color: #f2f2f2;
        margin: -5px -20px -15px;
        padding: 5px 20px 5px;
    }

</style>


